<template>
  <div class="app-container">
    <el-form ref="form" :model="tpl" label-width="80px">
      <!-- <el-form-item style="width: 280px" label="模板名称">
        <el-input v-model="tpl.名称"></el-input>
      </el-form-item> -->

      <el-form-item label="路径">
        <el-select v-model="tpl.路径ID" filterable placeholder="请选择">
          <el-option v-for="item in autoLs.路径" :key="item.ID" :label="item.名称" :value="item.ID">
          </el-option>
        </el-select>

        <span style="margin-left: 10px">{{ tpl.路径ID }}</span>
      </el-form-item>

      <el-form-item label="场合">
        <el-select v-model="tpl.分组编码" filterable :loading="loading" remote reserve-keyword :remote-method="分组列表"
          placeholder="疾病名称" @change="grpchange">
          <el-option v-for="item in autoLs.分组" :key="item.分组编码" :label="item.分组编码2" :value="item.分组编码2">
            <span> {{ item.分组编码2 }}-{{ item.分组名称 }}</span>
          </el-option>
        </el-select>
        <span style="margin-left: 10px">{{ tpl.分组名称 }}</span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="copy">复制</el-button>
        <el-button @click="back">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import {
  tplExists,
  GetTplById,
  DisePath,
  stdCost,
  ljdir,
  ljVersion,
  ljCheckVersion,
  copyTpl,
  lcljml,
  autoComplete
} from "@/api/pathway";
@Component({
  name: "cop-tpl"
})
export default class extends Vue {
  private async created() {
    await this.lcljmlLs();
    let id: any = this.$route.query?.tid;
    await this.loadTpl(id);
  }

  private zdchange(val: any) {
    let ts: any = this.autoLs.主诊断.filter((it: any) => it.编码 == val);
    if (ts.length > 0) {
      this.tpl.疾病名称 = ts[0].名称;
    }
  }
  private grpchange(val: any) {
    let ts: any = this.autoLs.分组.filter((it: any) => it.分组编码 == val);
    if (ts.length > 0) {
      this.tpl.分组名称 = ts[0].分组名称;
    }
  }
  /**
   * 自动填充
   * tb:表
   * w:条件
   */
  private async autoName(tb: string, w: string) {
    let d: any = await autoComplete({ tb: tb, w: w });
    return d.data;
  }

  private loading = false;
  private autoLs = {
    主诊断: [],
    分组: [],
    路径: []
  };
  private timer: any;

  private async lcljmlLs() {
    let d = await lcljml({});
    this.autoLs.路径 = d.data;
  }

  private async 诊断列表(q: string) {
    this.loading = true;

    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(async () => {
      let w = "";
      if (q) {
        w = `(编码 like '%${q}%') or (名称 like '%${q}%') or(简码 like '${q}%')`;
      }
      let d: any = await this.autoName("V疾病编码目录", w);
      this.autoLs.主诊断 = d;
      this.loading = false;
    }, 800);
  }

  private async 分组列表(q: string) {
    this.loading = true;

    if (this.timer) {
      clearTimeout(this.timer);
    }
    this.timer = setTimeout(async () => {
      let w = "";
      if (q) {
        w = `(分组编码 like '%${q}%') or (分组名称 like '%${q}%')`;
      }
      let d: any = await this.autoName("V病组标杆值", w);
      d = d || [];
      d.forEach((it: any) => {
        it.分组编码2 = it.分组编码.substring(0, 3);
      });
      this.autoLs.分组 = d;
      this.loading = false;
    }, 500);
  }
  private tpl: any = {};

  private async loadTpl(id: string) {
    let d: any = await GetTplById({ id: id });
    this.tpl = d.data.tpl;

    if (this.tpl && this.tpl.路径ID) {
      this.tpl.路径ID = parseInt(this.tpl.路径ID);
    }
    if (this.tpl.分组编码) {
      this.tpl.分组编码 = this.tpl.分组编码.substring(0, 3);
    }
  }

  private async copy() {
    const loading = this.$loading({
      text: `提交中....`,
      lock: true,
      background: "rgba(255, 255, 255, 0.1)"
    });
    this.tpl.手术名称 = this.tpl.手术编码 = "";

    let d = await copyTpl({
      tplid: this.tpl.id,
      pid: this.tpl.路径ID,
      ch: this.tpl.分组编码,
      doc: UserModule.name
    });
    //this.$router.back();
    document.querySelector('#tab-copyTpl span')?.dispatchEvent(new Event('click'));
    document.querySelector('#tab-pathtemplate')?.dispatchEvent(new Event('click'))
    this.$message('复制成功!');
    loading.close();
  }

  private back() {
    this.$router.back();
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 400px;
}
</style>
